<template>
	<view class="pageBg">
		<swiperBox :data="data"></swiperBox>
		<briefIntroduction :data="data" :price="price" :type="type" @FavoriteEdit="init"></briefIntroduction>
		<choice :data="data" @editPrice="editPrice"></choice>
		<view class="" v-html="imgAddStyle(data.content)"></view>

		<view class="btnbox spaceBetween">
			<view class="btn" @click="buy">立即购买</view>
		</view>
	</view>
</template>

<script>
	import swiperBox from '@/components/wbz/swiperBox/swiperBox.vue';
	import briefIntroduction from '@/components/wbz/briefIntroduction/briefIntroduction.vue';
	import choice from '@/components/product/choice/choice.vue';

	export default {
		components: {
			swiperBox,
			briefIntroduction,
			choice,
		},
		data() {
			return {
				id: null,
				data: {},
				type: '2',
				price: '0.00',
				GoodsItem: {},
			};
		},
		onLoad({ id }) {
			this.id = id;
			this.init();
		},
		methods: {
			async init() {
				const { data } = await this.$api.goodsgetGoodsDetail({ goods_id: this.id });
				this.data = data;
			},
			editPrice({ price, GoodsItem, }) {
				this.price = price;
				this.GoodsItem = GoodsItem;
			},
			buy() {
				if (this.price === '0.00') {
					this.showToastMsg('请选择规格');
					return;
				}
				// const data = JSON.stringify(this.data.GoodsItem[this.GoodsItem]);
			uni.setStorageSync("orderData",this.data)
				uni.navigateTo({
					url: '/pages/product/order/order?GoodsItem=' +this. GoodsItem+'&id='+this.id,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.pageBg {
		padding-bottom: 200rpx;
		.btnbox {
			width: 100%;
			height: 140rpx;
			background: #ffffff;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			align-items: center;
			.btn {
				width: 690rpx;
				height: 80rpx;
				background: $price-color;
				border-radius: 40rpx;
				margin: 0 auto;
				text-align: center;
				line-height: 80rpx;
				font-size: $uni-font-size-15;
				color: #ffffff;
			}
		}
	}
</style>
